import React from "react";
import ProForm, { ProFormText, ProFormSelect } from "@ant-design/pro-form";
import MusicAPI from '@/services/ant-design-pro/music';
import { Modal, message } from 'antd'
import { connect } from 'dva'

const { addClassify, updateClassify } = MusicAPI;
const categories = [
    {
        text: "语种",
        label: "语种",
        value: 0,
        defaultValue: 0,
    },
    {
        text: "风格",
        label: "风格",
        value: 1,
        defaultValue: 1,
    },
    {
        text: "场景",
        label: "场景",
        value: 2,
        defaultValue: 2,
    },
    {
        text: "情感",
        label: "情感",
        value: 3,
        defaultValue: 3,
    },
    {
        text: "主题",
        label: "主题",
        value: 4,
        defaultValue: 4,
    }
];
const CreateOrEdit = (props) => {
    const { isModalVisible, isShowModal, actionRef, setData, initData, dispatch } = props;
    const type = initData === undefined ? "添加" : "编辑";
    /**
     * 添加或编辑标签
     * @param {obj} params 参数
     * @returns 
     */
    const handleSubmit = async (params) => {
        let result;
        if (initData === undefined) { // 添加
            result = await addClassify(params);
        } else { // 编辑
            let i = 0;
            for (let key in params) {
                if (params[key] == initData[key]) {
                    i++;
                }
            }
            if (i >= 1)
                return message.error("您还未修改数据")

            result = await updateClassify({
                ...initData,
                ...params,
            });
        }

        if (result.status == 'ok') {
            await setData(true);
            actionRef.current.reload();
            message.success(type + "成功");
        } else {
            message.error(type + '失败：' + result.data.message);
            console.log(result.data.error);
        }
        isShowModal(false);
    }

    return (<Modal
        title={`${type}标签`}
        footer={false}
        visible={isModalVisible}
        onCancel={() => isShowModal(false)}
        destroyOnClose={true}>
        {
            <ProForm
                onFinish={(values) => handleSubmit(values)}
                initialValues={initData}
            >
                <ProFormText
                    name="name"
                    label="标签名称"
                    placeholder="请输入名称"
                    rules={[
                        { required: true, message: "请输入名称" }
                    ]}
                />
                <ProFormSelect
                    options={categories}
                    showSearch
                    name="category"
                    label="类别"
                    optionFilterProp="children"
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                />
            </ProForm>
        }
    </Modal>);
}

export default connect(({ music }) => ({ categories: music.classifyTags.categories }))(CreateOrEdit);